<template>
	<div class="bg-white">
		<el-form :inline="true">
			<el-row>
				<el-col :span="24">
					<el-form-item label="名称关键词" prop="applyName">
						<el-input placeholder="输入表单关键词" style="width:300px;" v-model="queryParam.applyName" />
					</el-form-item>

					<el-form-item label="申请时间" prop="time">
						<el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>

					<el-form-item label="申请类型" prop="applyType">
						<el-select v-model="queryParam.applyType" placeholder="请选择申请类型" clearable>
							<el-option
								v-for="item in $enum.APPROVE_TYPE_OPTIONS"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="申请人" prop="applicant">
						<el-input placeholder="请输入申请人" v-model="queryParam.applicant" />
					</el-form-item>

					<el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
					<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">刷新</el-button>
				</el-col>
			</el-row>
		</el-form>

		<el-table v-loading="loading" :data="applyList" :max-height="mapHeight" border>
			<el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
			<el-table-column label="申请表单" prop="tableNames" align="center" key="1" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<a href="javascript:;" style="color:#409eff;" @click="handleAuditDialog(scope.row)">{{ scope.row.tableNames || '-' }}</a>
				</template>
			</el-table-column>
			<el-table-column label="申请类型" prop="applyType" align="center" key="2">
				<template slot-scope="scope">
					{{ $enum.APPROVE_TYPE_MAP[scope.row.applyType] }}
				</template>
			</el-table-column>
			<el-table-column label="申请对象" prop="groupName" align="center" key="3">
				<template slot-scope="scope">
					<span>{{ scope.row.groupName ? scope.row.groupName : scope.row.userName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请人" prop="applicant" align="center" key="4">
					<template slot-scope="scope">
					{{ scope.row.applicant || '-' }}
				</template>
			</el-table-column>
			<el-table-column label="申请人所在组" prop="groupName" align="center" key="5">
				<template slot-scope="scope">
					{{ scope.row.groupName || '-' }}
				</template>
			</el-table-column>
			<el-table-column label="申请时间" prop="createTime" align="center" key="6" width="160" />
			<el-table-column label="审批人" prop="approvedBy" align="center" key="7" />
			<el-table-column label="审批时间" prop="updateTime" align="center" key="8" width="160" />
			<el-table-column label="全部审批人" prop="allApprovedBy" align="center" key="9">
				<template slot-scope="scope">
					{{ scope.row.allApprovedBy || '-' }}
				</template>
			</el-table-column>
				
			<el-table-column label="审批结果" prop="status" align="center" key="10">
				<template slot-scope="scope">
					{{ $enum[$enum.APPROVE_STATUS_KEY_MAP[scope.row.applyType]][scope.row.status] || '-' }}
					<!-- {{ $enum.TABLE_APPROVE_STATUS_MAP[scope.row.status] || '-' }} -->
				</template>
			</el-table-column>
			<el-table-column label="申请原因" prop="applyReason" align="center" key="11">
					<template slot-scope="scope">
					{{ scope.row.applyReason || '-' }}
				</template>
			</el-table-column>
			<el-table-column label="备注" prop="comment" align="center" key="12" :show-overflow-tooltip="true" />
		</el-table>
		<pagination v-show="queryParam.total>0" :total="queryParam.total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize" @pagination="getList" />
		<!-- 表详情弹窗 -->
		<approve-table-dialog v-model="dialogTableVisible" :item-id.sync="currentTableId"></approve-table-dialog>
		<!-- 接口详情弹窗 -->
		<approve-api-dialog v-model="dialogApiVisible" :item-id.sync="currentApiId" @success="handleQuery"></approve-api-dialog>
	</div>
</template>

<script>
	import approveTableDialog from "@/views/dataManagement/system/approve/components/approveTableDialog"
	import approveApiDialog from "@/views/dataManagement/system/approve/components/approveApiDialog"
	import { listApply } from "@/api/dataManagement/system/apply";
	import { getHeight } from "@/utils/zkComm";
	
	export default {
		components: {
			approveTableDialog,
			approveApiDialog
		},
		data() {
			return {
				loading: false,
				queryParam: {
					waitingAduit: 0,
					pageNum: 1,
					pageSize: 30,
					total: 0,
					applyName: '',
					applicant: '',
					applyType: '',
				},
				applyList: [],
				// 日期
				date: null,
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				mapHeight: undefined,
				dialogTableVisible: false,
				currentTableId: 0,
				dialogApiVisible: false,
				currentApiId: 0
			}
		},
		created() {
			this.getList()
		},
		activated() {
			this.getList();
		},
		mounted() {
			this.mapHeight = getHeight(true) - 60;
		},
		methods: {
			getList() {
				if (this.date && this.date.length != 0) {
					// 搜索日期一样时，修改结束时间为下一天
					if (this.date[0] == this.date[1]) {
						this.queryParam.startDate = this.date[0]
						this.queryParam.endDate = this.dateAdd(this.date[0])
					} else {
						this.queryParam.startDate = this.date[0]
						this.queryParam.endDate = this.date[1]
					}
				} else {
					delete this.queryParam.startDate
					delete this.queryParam.endDate
				}
				if (this.loading) {
					return false
				}
				this.loading = true

				listApply(this.queryParam).then(res => {
					this.applyList = res.data.records
					this.queryParam.total = res.data.total
					this.loading = false
				})
			},
			handleQuery() {
				this.getList()
			},
			resetQuery() {
				this.date = []
				this.queryParam = {
					waitingAduit: 0,
					pageNum: 1,
					pageSize: 30,
					total: 0
				}
				this.handleQuery()
			},
			// 申请详情
			handleAuditDialog(data) {
				if (data.applyType == 1) {
					this.currentTableId = data.id
                	this.dialogTableVisible = true
				} else {
					this.currentApiId = data.id
                	this.dialogApiVisible = true
				}
			},
			// 获取下一天
			dateAdd(startDate) {
				startDate = new Date(startDate);
				startDate = +startDate + 1000 * 60 * 60 * 24;
				startDate = new Date(startDate);
				let nextStartDate = startDate.getFullYear() + "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate();
				return nextStartDate;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/styles/system/common.scss";
</style>







